<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>徽章</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div>
        <h3>小圆点</h3>
        <span class="layui-badge-dot"></span>
        <span class="layui-badge-dot layui-bg-blue"></span>
        <span class="layui-badge-dot layui-bg-orange"></span>
        <span class="layui-badge-dot layui-bg-black"></span>
        <span class="layui-badge-dot layui-bg-cyan"></span>
        <span class="layui-badge-dot layui-bg-green"></span>
        <span class="layui-badge-dot layui-bg-red"></span>
    </div>
    <hr>
    <div>
        <h3>椭圆体</h3>
        <span class="layui-badge">赤</span>
        <span class="layui-badge layui-bg-orange">橙</span>
        <span class="layui-badge layui-bg-green">绿</span>
        <span class="layui-badge layui-bg-cyan">青</span>
        <span class="layui-badge layui-bg-blue">蓝</span>
        <span class="layui-badge layui-bg-gray">灰</span>
    </div>
    <hr>
    <div>
        <h3>边框体</h3>
        <span class="layui-badge-rim layui-bg-green">99</span>
        <span class="layui-badge-rim layui-bg-orange">99999</span>
    </div>
</body>
</html>